ES Module

在瀏覽器上運行 ES 模組

1.將標籤定義 <script type="module">，才可進行程式碼的匯入及匯出。
2.每一個 <script type="module"></script> 區塊的作用域都是獨立的。
3.網路上找到的 “ESM”，如果條件允許是可以使用 import 方式載入。

匯出匯入觀念

匯出- JS

• 預設匯出：每個檔案只有一個 default。

  常見的匯出方式，通常用於匯出物件，在 Vue 開發中可用來匯出元件
  

  export default 值

• 具名匯出：每個檔案可以有多個。

  可用於匯出已定義的變數、物件、函式，專案開發中通常用於「方法匯出」，第三方的框架、函式、套件很常使用具名定義「方法」。
  

  export const a = 1;
  export function fn() {
  console.log("匯出函式");
  }

匯入- HTML、JS

• 預設匯入：

  import 自訂名稱 from "檔名.js"

• 具名匯入：
  • 單一匯入（建議寫法）：

    import { 具名名稱 } from "檔名.js"

  • 全部匯入（不建議寫法，錯誤較難發現）：

    //全部匯出可能會造成名稱上的衝突，所以使用 as 賦予到一個物件名稱上
    import * as 物件名稱 from "檔名.js"

sideEffect

不須進行匯出，但可直接匯入，且匯入後可直接執行。常見案例如：jQuery

// 檔名 sideEffect.js
(function (global) {
  global.$ = '我是 jQuery';
})(window);

import "./sideEffect.js";
console.log($) //我是 jQuery 

---

學習來源：六角學院–Vue 3 實戰影音課程